<template>
  <basic-container page-title="超管管理" custom-content>
    <template #filter>
      <el-button type="primary" @click="handleCommand('create')">
        添加管理员
      </el-button>
      <el-button plain @click="handleCommand('loginRecord')">
        登录记录
      </el-button>
    </template>

    <el-table
      v-loading="loading"
      :data="tableData"
      class="basic-table"
      :tooltip-options="{ popperClass: 'basic-tooltip' }"
      height="100%"
      @sort-change="handleSortChange"
    >
      <template #empty><TableEmpty /></template>
      <el-table-column
        label="账号"
        width="175"
        fixed="left"
        prop="username"
        show-overflow-tooltip
        :formatter="emptyFormatter"
      />
      <el-table-column show-overflow-tooltip label="角色" :min-width="152">
        <template #default="{ row }">
          <span>{{ getOptionsLabel(AdminRoleOptions, row.role) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最近登录时间" min-width="180">
        <template #default="{ row }">
          <span v-format-unix="row.login_at"></span>
        </template>
      </el-table-column>
      <el-table-column label="最近登录IP" :min-width="150">
        <template #default="{ row }">
          <span v-format-table-cell="row.login_ip"></span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="所在地" :min-width="150">
        <template #default="{ row }">
          <span v-format-table-cell="row.login_addr"></span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="created_at"
        show-overflow-tooltip
        label="添加时间"
        min-width="180"
        sortable="custom"
      >
        <template #default="{ row }">
          <span v-format-unix="row.created_at"></span>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="updated_at"
        show-overflow-tooltip
        label="更新时间"
        min-width="180"
        sortable="custom"
      >
        <template #default="{ row }">
          <span v-format-unix="row.updated_at"></span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template #default="{ row }">
          <basic-switch
            :model-value="row.status"
            :disabled="
              row.role === E_ADMIN_ROLE.ADMIN ||
              row.id === appStore.userInfo?.id
            "
            @click="handleCommand('toggleStatus', row)"
          ></basic-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="{ row }">
          <div class="flex items-center gap-x-4">
            <el-link
              class="font-normal text-sm"
              :underline="false"
              type="primary"
              @click="handleCommand('resetPassword', row)"
            >
              重置密码
            </el-link>
            <el-link
              class="font-normal text-sm"
              :disabled="row.role === E_ADMIN_ROLE.ADMIN"
              :underline="false"
              type="primary"
              @click="handleCommand('editor', row)"
            >
              编辑
            </el-link>
            <el-link
              class="font-normal text-sm"
              :disabled="
                row.role === E_ADMIN_ROLE.ADMIN ||
                row.id === appStore.userInfo?.id
              "
              :underline="false"
              type="danger"
              @click="handleCommand('delete', row)"
            >
              删除
            </el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <basic-pagination
        :pagination="pagination"
        @change="getList()"
      ></basic-pagination>
    </template>
  </basic-container>

  <editor-dialog
    v-model:visible="editorState.visible"
    :record="editorState.record"
    @reload="getList"
  ></editor-dialog>

  <login-record-dialog
    v-model:visible="loginRecord.visible"
  ></login-record-dialog>
  <CommonDealDialog
    v-model:visible="dealDialog.visible"
    :content="dealDialog.content"
    :command="dealDialog.command"
    :record="dealDialog.record"
    @reload="getList"
  >
  </CommonDealDialog>
  <ResetPasswordDialog
    v-model:visible="resetPasswordState.visible"
    :record="resetPasswordState.record"
    @reload="getList"
  ></ResetPasswordDialog>
</template>

<script setup lang="ts">
import { get, isFunction } from 'lodash-es'

import type { AdminModel } from '@/apis/model/admin'
import { BasicContainer, CommonDealDialog } from '@/components/application'
import { AdminRoleOptions, E_ADMIN_ROLE } from '@/config/enums/admin'
import { useListRequest } from '@/hooks/useListRequest'
import { useAppStore } from '@/stores/modules/app'
import { getOptionsLabel } from '@/utils'

import EditorDialog from './dialogs/EditorDialog.vue'
import LoginRecordDialog from './dialogs/LoginRecordDialog.vue'
import ResetPasswordDialog from './dialogs/ResetPasswordDialog.vue'

const formState = reactive<SortCustomParams>({
  sort: null,
  order: null
})

/**
 * 获取列表数据
 */
const {
  data: tableData,
  getList,
  loading,
  pagination
} = useListRequest(adminListApi, formState)
onMounted(getList)

const appStore = useAppStore()

/**
 * 编辑新增管理员dialog
 */
const editorState = reactive<CommonDialog<AdminModel>>({
  visible: false,
  record: undefined,
  loading: false
})

/**
 * 登录记录dialog
 */
const loginRecord = reactive<CommonDialog>({
  visible: false
})

const dealDialog = reactive<CommonDialog>({
  visible: false,
  content: '',
  command: '',
  record: undefined
})

const resetPasswordState = reactive<CommonDialog>({
  visible: false,
  record: undefined
})

type ICommand =
  | 'create'
  | 'editor'
  | 'delete'
  | 'resetPassword'
  | 'loginRecord'
  | 'toggleStatus'
const handleCommand = (command: ICommand, record?: AdminModel) => {
  const actions: Record<ICommand, () => void> = {
    // 重置密码
    resetPassword: (): void => {
      resetPasswordState.visible = true
      resetPasswordState.record = record
    },

    // 打开登录记录弹窗
    loginRecord: (): void => {
      loginRecord.visible = true
    },

    // 删除管理员
    delete: (): void => {
      dealDialog.content = '确定删除该管理员账户吗？'
      dealDialog.command = command
      dealDialog.visible = true
      dealDialog.record = record
    },

    // 新建
    create: (): void => {
      editorState.record = undefined
      editorState.visible = true
      editorState.loading = false
    },

    // 编辑
    editor: (): void => {
      editorState.record = record
      editorState.visible = true
      editorState.loading = false
    },

    toggleStatus: async () => {
      dealDialog.content = `确定${
        record?.status === 1 ? '禁用' : '启用'
      }该管理员账户吗？`
      dealDialog.command = command
      dealDialog.visible = true
      dealDialog.record = record
    }
  }

  if (isFunction(get(actions, command))) {
    actions[command]()
  }
}

function handleSortChange(params) {
  const { sort, order } = getSortValue(params)
  formState.order = order
  formState.sort = sort
  pagination.page = 1
  getList()
}
</script>

<style scoped></style>
